<template>
	<view class="container flex-c">
		<uni-nav-bar class="ch-nav" height="88rpx" backgroundColor="#ffffff" leftWidth="90rpx" rightWidth="90rpx" color="#333" :fixed="true" :padding="false" :border="false" @clickLeft="$goBack(1)">
			<template slot="left">
				<image class="left" src="@/public/images/public/dhl_fhjt.png" mode="aspectFit"></image>
			</template>
			<text class="title">申请成为专家</text>
		</uni-nav-bar>
		<view class="head flex-r ac" :class="{'navborder': navBorder}">
			<view class="step flex-c ac" v-for="(step, index) in stepList" :key="index" :class="{'active': index <= activeStep}">
				<view class="sort flex-r ac">
					<text class="line" v-if="index != 0" :class="{'active': activeStep > index || activeStep == 1 || activeStep == 2}"></text>
					<text class="num">{{index+1}}</text>
					<text class="line" v-if="index != 2" :class="{'active': activeStep > index }"></text>
				</view>
				<text class="info">{{step}}</text>
			</view>
		</view>
		<view class="body flex-c">
			<text class="text-primary text-bold">作者规则说明：</text>
			<ExpertRules></ExpertRules>
		</view>
		<view class="foot bottom-ios flex-c">
			<view class="accept text-small flex-r ac jc" @tap="isAgree=!isAgree">
				<image :src="isAgree ? require('@/public/images/user/cz_xz.png') : require('@/public/images/user/cz_wxz.png')" class="radio"></image>
				<text class="color-grey">我已阅读并接受</text>
				<text class="color-blue">《作者规则说明》</text>
			</view>
			<view class="submit-box" @tap="goNext()">
				<button :class="{'active': isAgree}">下一步</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navBorder: false,
				isAgree: false,
				stepList: [ '专家信息审核', '个人资料审核', '审核通过' ]
			}
		},
		components: {
			ExpertRules: () => import("@/components/ch-rules/ch-expertrules.vue")
		},
		computed: {
			activeStep() {
				if(this.$store.state.user.isApplyUgc === 1){
					if(this.$store.state.user.approvalStatus === 0){
						return 1
					}else if(this.$store.state.user.approvalStatus === 1){
						return 2
					}else if(this.$store.state.user.approvalStatus === 2){
						this.stepList[2] = '审核未通过'
						return 2
					}
				}else{
					return 0
				}
			}
		},
		onLoad() {
			this.$store.dispatch('updateUserinfo');
		},
		onPageScroll(e) {
			if(e.scrollTop > 10){
				this.navBorder = true
			}else{
				this.navBorder = false
			}
		},
		methods: {
			goNext() {
				if(this.isAgree){
					if(this.activeStep == 0){
						this.$Router.replace({name: 'applyinfo'})
					}else{
						this.$Router.replace({name: 'applystatus', params: {approvalStatus: this.$store.state.user.approvalStatus}})
					}
				}else{
					uni.showToast({
						title: '请阅读并接受《作者规则说明》',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		padding: 0;
	}
	.head{
		max-width: $max-width;
		margin: $pc-margin;
		background-color: #fff;
		position: fixed;
		left: 0;
		right: 0;
		top: $navbar-height;
		height: 120rpx;
		.step{
			width: 250rpx;
			.sort{
				width: 100%;
				.line{
					width: 101rpx;
					height: 2rpx;
					background-color: #E6E6E6;
				}
				.num{
					width: 48rpx;
					height: 48rpx;
					background: #D9D9D9;
					border-radius: 50%;
					text-align: center;
					font-size: 28rpx;
					font-family: Arial;
					color: #FFFFFF;
					line-height: 48rpx;
				}
			}
			.info{
				margin-top: 19rpx;
				color: #B3B3B3;
				font-size: 22rpx;
				line-height: 22rpx;
			}
			&.active{
				.line.active{
					background-color: #0055FF;
				}
				.num{
					background-color: #0055FF;
					color: #FFF;
				}
				.info{
					color: #0055FF;
				}
			}
		}
		.step:first-child{
			.sort{
				justify-content: flex-end;
			}
		}
		.step:nth-child(2){
			.line{
				flex: 2;
			}
		}
	}
	.body{
		margin-top: 120rpx;
		padding-bottom: calc(200rpx + var(--safe-area-inset-bottom) + var(--vh-offset, 0px));
		.text-primary{
			line-height: 88rpx;
			margin-left: 20rpx;
		}
	}
	.foot{
		max-width: $max-width;
		margin: $pc-margin;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx;
		background-color: #fff;
		box-shadow: 0px -1px 0px 0px #EDEDED;
		box-sizing: border-box;
		.accept{
			image{
				margin-right: 20rpx;
				width: 32rpx;
				height: 32rpx;
			}
		}
		.submit-box{
			margin: 20rpx 0;
			button{
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 44rpx;
			}
		}
	}
</style>
